<template>
  <form action="/">
    <van-search
      v-model="keyword"
      :placeholder="placeholder"
      shape="round"
      @search="onSearch"
      @update:model-value="updateKeyword"
    >
      <template v-for="(_, name) in $slots" v-slot:[name]>
        <slot :name="name"></slot>
      </template>
    </van-search>
  </form>
</template>

<script setup name="i-search">
const emit = defineEmits(['update:modelValue', 'onSearch'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入搜索关键词'
  }
})
const keyword = ref(props.modelValue)

const updateKeyword = (value) => {
  emit('update:modelValue', value)
}
const onSearch = () => {
  emit('onSearch')
}
</script>

<style scoped>
</style>
